<template>
	<view class="keyboard " :class="{'show':show,'dark':dark}">
		<view class="keyboard-content">
			<view class="keyboard-content-left">
				<view class="keyboard-content-left-item" v-for="item in KeyboardNumber"  :index="item" @click="_setValue(item)" >
					<view class="keyboard-content-left-item-cell hover">
						{{item}}
					</view>
				</view>
				<view class="keyboard-content-left-item" v-if="isDecimal" @click="_setValue('.')">
					<view class="keyboard-content-left-item-cell hover" >.</view>
				</view>
			</view>
			<view class="keyboard-content-right">
				<view class="keyboard-content-right-item" @click="_setValue('delete')">
					<view class="keyboard-content-right-item-cell hover">
						<image class="icon"  src="../../static/keybordad/backspace.png" mode="aspectFill"></image>
						<!-- <image class="icon" v-else src="../../static/mono-keyboard/backspace_dark.png" mode="aspectFill"></image> -->
					</view> 
				</view>
				<view class="keyboard-content-right-item" @click="confirm">
					<view class="keyboard-content-right-item-confirm" :class="{'disable':!isDisable,'hover':money}" :style="{'background-color':btnColor }">{{confirmText}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name:'monokeyboard', 
		props:{
			show:{
				default:false,
				type:Boolean
			},
			dark:{
				default:false,
				type:Boolean
			},
			btnColor:{
				default:'#07C160',
				type:String
			},
			confirmText:{
				default:'充值',
				type:String
			},
			isDecimal:{
				default:true,
				type:Boolean
			},
			value:{
				default:'',
				type:[Number,String]
			}
		},
		data(){
			return {
				KeyboardNumber:[1,2,3,4,5,6,7,8,9,0],
				money:'',
				regex:/^$|^(?:-?(?:0|[1-9]\d{0,5})(?:\.\d{1,2})?)$/
				// regex:/^$|^-?\d{1,12}$|^-?\d{1,12}\.\d{0,2}$/
			}
		},
		created(){
			this.money+=this.value
		},
		computed:{
			isDisable(){
				return this.money&&this.regex.test(this.money)
			}
		},
		methods:{
			_setValue:function(e){
				let newMoney=this.money
				switch(e){
					case '.':
						if(newMoney.indexOf('.') > -1) break
						if(newMoney==''){
							newMoney = '0.' 
						}else{
							newMoney += e.toString()
						}
						break
					case 'delete':
						if(newMoney.length > 0){
							newMoney = newMoney.substr(0,newMoney.length-1)
						}
						break
					default:
					newMoney +=e.toString()
				}
				// const regex = /^$|^-?\d{1,12}$|^-?\d{1,12}\.\d{0,2}$/;
				if(/^$|^-?(?:0|[1-9]\d{0,5})(?:\.\d{0,2})?$/.test(newMoney)){
					this.money=newMoney
					this.$emit("change",newMoney)
				}
			},
			confirm:function(){
				if(this.money.length>0&&this.isDisable){
					this.$emit("confirm",this.money)
				}
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.dark{
		background-color: #1E1E1E !important;
		.keyboard-content-left-item-cell{
			background-color: #2c2c2c !important;
			color: rgba(255,255,255,0.6);
		}
		.keyboard-content-right-item-cell{
			background-color: #2c2c2c !important;
		}
		.keyboard-content-left-item-cell:active{
			background-color: rgba(255,255,255,0.2) !important;	
		}
		.keyboard-content-right-item-cell:active{
			background-color: rgba(255,255,255,0.2) !important;	
		}
	}
	.keyboard{
		position:fixed;
		left: 0;
		transform: translateY(100%);
		transition: all 0.3s ease;
		bottom: 0;
		background-color: #F7F7F7;
		width: 100%;
		padding: 20rpx 0 40rpx 0;
		box-sizing: border-box;
		.keyboard-content{
			display: flex;
			.keyboard-content-left{
				width: 75%;
				display: flex;
				flex-wrap: wrap;
				.keyboard-content-left-item{
					flex-basis: 33%;
					flex-grow: 1;
					padding: 0 0 15rpx 15rpx;
					box-sizing: border-box;
					.keyboard-content-left-item-cell{
						background-color: #ffffff;
						border-radius: 8rpx;
						text-align: center;
						font-size: 46rpx;
						line-height: 92rpx;
						font-weight: 500;
					}
					.keyboard-content-left-item-cell:active{
						background-color: rgba(0,0,0,0.1);	
					}
				}
				.keyboard-content-left-item:nth-child(10){
					flex-basis: 66%;
					flex-grow:1;
				}
			}
			.keyboard-content-right{
				width: 25%;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				.keyboard-content-right-item{
					width: 100%;
					padding: 0 15rpx 15rpx 15rpx;
					box-sizing: border-box;
					
					.keyboard-content-right-item-cell{
						border-radius: 8rpx;
						background-color: #ffffff;
						height: 92rpx;
						line-height: 92rpx;
						padding: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						image{
							height: 60%;
							width: 40%;							
						}
					}
					.keyboard-content-right-item-cell:active{
						background-color: rgba(0,0,0,0.1);	
					}
				}
				.keyboard-content-right-item:nth-child(2){
					flex:1;
					.keyboard-content-right-item-confirm{
						background-color: #07C160;
						opacity: 1;
						color: rgba(255,255,255,0.8);
						height: 100%;
						border-radius: 8rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.disable{
						opacity: 0.4;
					}
					.hover:active{
						//background-color: rgba(8,165,82,1);	
						opacity: 0.8;
					}
				}
			}
		}
	}
	.show {
			transition: all 0.3s ease;
			transform: translateY(0%) !important;
		}
</style>